import { inject, onMounted, ref } from "vue"
import axios from "axios"
import { mapStore } from "@/stores/counter"
export const site = () => {
    const store = mapStore()
    let scene
    let map
    let data
    let popup
    const count = ref(1)
    onMounted(async () => {
        scene = inject('$scene')
        map = inject('$map')
        const res = await axios.get('/src/source/站点/站点列表.csv')
        const lines = res.split('\n')
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                name: value[1],
                city: value[2],
                lng: parseFloat(value[3]),
                lat: parseFloat(value[4])
            }
        })
        const arr = data.map(item => {
            return {
                count: count.value,
                city: item.city
            }
        })


        let cityMap = {};

        arr.forEach(item => {
            if (!cityMap[item.city]) {
                // 如果城市不存在于辅助对象中，将其添加，并初始化计数为 1
                cityMap[item.city] = { ...item }; // 使用扩展运算符复制对象，确保不影响原对象
            } else {
                // 如果城市已存在，增加计数
                cityMap[item.city].count++;
            }
        });

        // 将结果从辅助对象转回数组
        let resultArr = Object.values(cityMap);
        store.site_more = resultArr.sort((a, b) => b.count - a.count).splice(0, 8)
    })

    const siteClick = () => {
        store.ispmItem = false
        if (scene.getLayer() != 0) {
            scene.removeAllLayer()
        }
        // 转为geojson数据
        let geojson_site = {
            type: 'FeatureCollection',
            features: data.map(item => ({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                },
                properties: {
                    name: item.name,
                    city: item.city
                }
            }))
        }
        // const layer = new L7.PointLayer()
        //     .source(geojson_site)
        //     .shape('radar')
        //     .size(10)
        //     .color('#ff2d51')
        //     .style({
        //         speed: 5,
        //     })
        //     .animate(true);

        // scene.addLayer(layer);
        const pointLayer = new L7.PointLayer({})
            .source(geojson_site)
            .shape('circle')
            .active(true)
            .animate(true)
            .size(25)
            .color('#ffa842')
            .style({
                offsets: [40, 40],
            });

        scene.addLayer(pointLayer);

        pointLayer.on('mousemove', evt => {
            console.log(evt)
            popup = new L7.Popup({
                offsets: [0, 0],
                closeButton: false,
            })
                .setLnglat(evt.lngLat)
                .setHTML(`
                    <span><strong>城市:<strong/>${evt.feature.properties.city}</span>
                    <p><strong>地区:<strong/>${evt.feature.properties.name}</p>
                    `);
            scene.addPopup(popup);
        })
        pointLayer.on('mouseout', () => {
            scene.removePopup(popup)
        })
    }

    return {
        siteClick
    }
}